<template>
	<view class="stepper">
		<view class="step-btn" @click="reduce">-</view>
		<input class="step-input" type="number" :value="num" @input="inputChange"/>
		<view class="step-btn" @click="add">+</view>
	</view>
</template>

<script>
export default {
	name: "XSetpper",
	props: {
		name: {
			type: [String, Number],
			required: false,
			default: '-'
		},
		value: {
			type: Number,
			required: true,
			default: 1
		},
		
	},
	data() {
		return {
			num: this.value
		}
	},
	methods: {
		reduce() {
			if(this.num > 1) {
				this.num -= 1;
				this.$emit("change", {
					name: this.name,
					value: this.num
				});		
			}
		},
		add() {
			this.num += 1;
			this.$emit("change", {
				name: this.name,
				value: this.num
			});	
		},
		inputChange(e) {
			this.num = e.detail.value;
			this.$emit("change", {
				name: this.name,
				value: this.num
			});
		}
	}
}	
</script>

<style lang="less" scoped>
.stepper {
	display: flex;
	flex-direction: row;
	align-items: center;
	
	.step-btn {
		width: 25px;
		text-align: center;
		align-items: center;
		font-size: 18px;
	}
	
	.step-input {
		width: 25px;
		height: 16px;
		line-height: 16px;
		background: #f4f4f4;
		text-align: center;
		padding: 0 5px;
		font-size: 12px;
	}
}	
</style>